<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户详情</span>
          <el-button size="mini" style="float:right" @click="goBack">返回</el-button>
        </div>
      </template>
      <el-form ref="userForm" :model="userDetail" label-width="120px">
        <el-form-item label="书名:">
          <el-input v-model="userDetail.bookname" placeholder="请输入书名"></el-input>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model.number="userDetail.bookcounts" placeholder="请输入数量"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="userDetail.detail" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="userDetail.type" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUserDetail">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>

import { ref, reactive, onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import userApi from "../../api/user";
import {ElMessage} from "element-plus";
const route = useRoute();
const router = useRouter();
const userDetail = reactive({
  id: route.query.id || '',
  bookname: '',
  bookcounts: 0,
  detail: '',
  type: ''
});

const options = ref([
  { value: '1', label: '计算机技术' },
  { value: '2', label: '经济与投资' },
  { value: '3', label: '娱乐' },
  // 更多选项...
]);

const goBack = () => {
  router.go(-1);
};

const saveUserDetail = async () => {
  try {
    await userApi.updateBook(userDetail); // 假设这是更新用户详情的API
    ElMessage.success('保存成功')
    router.go(-1);
  } catch (error) {
    ElMessage.error('失败',error)
  }
};

onBeforeMount(async () => {
  //if (route.query.id) {
  const res = await userApi.getUserDetail({ id: route.query.id })
  Object.assign(userDetail, res.data.data);
  //}
})
</script>

<style lang="scss" scoped>

</style>